<template>
    <div class="h5-wrapper">
        <!--
        被 keep-alive 包裹的一级路由组件 Layout、Detail 都会被缓存，这里我们只希望 Layout 被缓存
        keep-alive 的三个属性可以设置被缓存的组件和不会被缓存的组件
        keep-alive 缓存的组件只会触发一次 created、mounted、destroyed
        keep-alive 会为缓存的组件提供两个特殊的生命周期钩子：activated、deactivated
        activated 表示页面激活了
        deactivated 表示页面失活了
        -->
        <keep-alive :include="keepArr">
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

<script>
export default {
    name: "h5-wrapper",
    data() {
        return {
            keepArr: ['LayoutPage']
        }
    }
}
</script>

<style>
body {
    margin: 0;
    padding: 0;
}
</style>
<style lang="less" scoped>
.h5-wrapper {
    .content {
        margin-bottom: 51px;
    }

    .tabbar {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        display: flex;
        background: #fff;
        border-top: 1px solid #e4e4e4;

        a {
            flex: 1;
            text-decoration: none;
            font-size: 14px;
            color: #333;
            -webkit-tap-highlight-color: transparent;

            &.router-link-active {
                color: #fa0;
            }
        }
    }
}
</style>